<template>
    <div>
        <el-dialog
            :modal-class="kefu.state.tabMode == 'small' ? 'kefu-user-window-modal' : ''"
            class="kefu-user-window"
            :class="[kefu.state.sessionDialog.shake ? 'ba-kefu-shake' : '', kefu.state.tabMode == 'small' ? 'kefu-user-window-small' : '']"
            :top="kefu.state.tabMode == 'small' ? '0' : '8vh'"
            v-model="kefu.state.sessionDialog.show"
            :draggable="true"
            :width="kefu.state.tabMode == 'small' ? '100%' : 900"
            :show-close="kefu.state.tabMode != 'small'"
        >
            <template #header="{ titleId, titleClass }">
                <div :id="titleId" :class="titleClass" class="kefu-user-window-header">
                    <template v-if="!isEmpty(kefu.state.sessionInfo) && kefu.state.sessionInfo.session_user_id">
                        <span>客服 {{ kefu.state.sessionInfo.nickname }} 为您服务</span>
                        <span :class="'status-' + kefu.state.sessionInfo.session_user_status" class="csr-status">
                            • {{ getStatusText(kefu.state.sessionInfo.session_user_status!) }}
                        </span>
                    </template>
                    <template v-else>
                        <span>{{ kefu.config?.app_name }}</span>
                    </template>
                    <Icon v-if="kefu.state.awaitResponse" name="el-icon-Loading" size="14" class="await-response-loading is-loading" />
                </div>
            </template>
            <div class="window">
                <div class="left">
                    <div class="notice">
                        <el-alert :closable="false" :type="kefu.config?.notice_theme">
                            <template #title>
                                <MdPreview
                                    class="notice-preview markdown-preview"
                                    id="notice"
                                    editorId="notice"
                                    codeTheme="github"
                                    :modelValue="kefu.config?.notice"
                                    :show-code-row-number="true"
                                />
                            </template>
                        </el-alert>
                    </div>
                    <Window class="window-records" />
                </div>
                <div class="right">
                    <el-carousel :motion-blur="true" height="150px">
                        <el-carousel-item v-for="(item, idx) in kefu.config?.sliders" :key="idx">
                            <el-image class="h100 w100" fit="cover" :src="fullUrl(item)"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                    <MdPreview
                        class="introduces ba-scroll-style markdown-preview"
                        id="introduces"
                        editorId="introduces"
                        codeTheme="github"
                        :modelValue="kefu.config?.introduces"
                        :show-code-row-number="true"
                    />
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { isEmpty } from 'lodash-es'
import { fullUrl } from '/@/utils/common'
import type kefuClass from '/@/components/kefu/index'
import { getStatusText } from '/@/components/kefu/store'
import Window from '/@/components/kefu/components/window.vue'
import useCurrentInstance from '/@/utils/useCurrentInstance'
import { MdPreview } from 'md-editor-v3'
import 'md-editor-v3/lib/preview.css'

const { proxy } = useCurrentInstance()
const kefu = proxy.kefu as kefuClass
</script>

<style scoped lang="scss">
:deep(.kefu-user-window-modal) {
    .el-overlay-dialog {
        overflow: hidden;
    }
    overflow: hidden;
}
:deep(.kefu-user-window) {
    height: 720px;
    --kefu-body-height: calc(720px - 44px);
    --el-dialog-title-font-size: 16px;
    padding: 0;
    .el-dialog__body {
        padding: 0;
    }
    .el-dialog__header {
        padding: 10px 54px 10px 10px;
        margin: 0;
        .el-dialog__headerbtn {
            top: 0;
            height: 44px;
            width: 44px;
        }
    }
}
:deep(.kefu-user-window-small) {
    margin-bottom: 0;
}
.markdown-preview {
    background: transparent;
    :deep(.default-theme p) {
        padding: 0;
        line-height: 1.3;
    }
    :deep(.md-editor-preview) {
        font-size: 15px;
    }
    :deep(.md-editor-preview-wrapper) {
        padding: 0;
        overflow: hidden;
    }
    :deep(.default-theme ul li) {
        margin: 0;
    }
    :deep(a) {
        color: var(--el-color-primary);
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }
}
.introduces {
    display: block;
    height: 520px;
    overflow-y: auto;
    overflow-x: hidden;
}
.kefu-user-window {
    .kefu-user-window-header {
        display: flex;
        align-items: center;
        .csr-status {
            padding-left: 4px;
            font-size: 12px;
        }
        .await-response-loading {
            margin-left: 10px;
        }
    }
    .window {
        display: flex;
        box-sizing: border-box;
        height: var(--kefu-body-height);
        .left {
            flex: 6;
            height: 100%;
            overflow: hidden;
            .notice {
                margin-left: 10px;
                .el-alert {
                    display: block;
                    width: 100%;
                    height: 50px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
            .window-records {
                position: relative;
                height: calc(100% - 50px);
            }
        }
        .right {
            flex: 2;
            height: 100%;
            padding: 0 10px;
        }
    }
}

.status-busy {
    color: #a94442;
}
.status-offline {
    color: #777;
}
.status-online {
    color: #3c763d;
}
</style>
